<template>
  <div class="slider">
    <div class="big">
      <ul class="container"
          :style="{ width: items.length * 100 + '%',
      transition: isTouchEnd ? 'all 0.3s' : 'all 0s',
      transform: isTouchEnd ? 'translateX(' + this.idx * this.oWidth + 'px)'
               : 'translateX(' + this.currentX + 'px)' }"
      >
        <div class="list" v-for="(item, _idx) in items">
          <div>
            <img :src="item" :style="{ height: _idx === -idx ? scaleX + '%' : 100 + '%', width: _idx === -idx ? scaleX + '%' : 100 + '%' }">
          </div>

        </div>
      </ul>
      <!--<div class="mark">-->
        <!--{{Math.abs(idx) + 1}} / {{items.length}}-->
      <!--</div>-->
    </div>
  </div>
</template>

<script>

import touch from 'touchjs/touch'


export default {
  props: {
    items: {
      type: Array,
      default: []
    }
  },
  components: {

  },
  data () {
    return {
      startX: 0,
      moveX: 0,
      currentX: 0,
      idx: 0,
      isTouchEnd: true,
      oWidth: document.body.offsetWidth,
      isScale: false,
      touchLen: 0,
      scaleX: 100,
      currentScaleX: 0,
      scaleOne: {
        startX: 0,
        x: 0
      },
      scaleTwo: {
        startX: 0,
        x: 0
      },
      isScroll: false
    }
  },
  mounted () {

  },
  updated () {
    var cat = window.cat || {}
    let big = $('.big')
    cat.touchjs = {
      left: 0,
      top: 0,
      scaleVal: 1,    //缩放
      rotateVal: 0,   //旋转
      curStatus: 0,   //记录当前手势的状态, 0:拖动, 1:缩放, 2:旋转
//      //初始化
//      init: function ($targetObj, callback) {
//        touch.on($targetObj, 'touchstart', function (ev) {
//          cat.touchjs.curStatus = 0;
//          ev.preventDefault();//阻止默认事件
//        });
//        if (!window.localStorage.cat_touchjs_data)
//          callback(0, 0, 1, 0);
//        else {
//          var jsonObj = JSON.parse(window.localStorage.cat_touchjs_data);
//          cat.touchjs.left = parseFloat(jsonObj.left), cat.touchjs.top = parseFloat(jsonObj.top), cat.touchjs.scaleVal = parseFloat(jsonObj.scale), cat.touchjs.rotateVal = parseFloat(jsonObj.rotate);
//          callback(cat.touchjs.left, cat.touchjs.top, cat.touchjs.scaleVal, cat.touchjs.rotateVal);
//        }
//      },
      drag: function ($targetObj, callback) {

        console.log(cat.touchjs.left)
        touch.on($targetObj, 'drag', function (ev) {
          $targetObj.css("left", cat.touchjs.left + ev.x).css("top", cat.touchjs.top + ev.y);
        });
        touch.on($targetObj, 'dragend', function (ev) {
          cat.touchjs.left = cat.touchjs.left + ev.x;
          cat.touchjs.top = cat.touchjs.top + ev.y;
          callback(cat.touchjs.left, cat.touchjs.top);
        });
      },
      //缩放
      scale: function ($targetObj, callback) {
        var initialScale = cat.touchjs.scaleVal || 1;
        var currentScale;
        touch.on($targetObj, 'pinch', function (ev) {
          if (cat.touchjs.curStatus == 2) {
            return;
          }
          cat.touchjs.curStatus = 1;
          currentScale = ev.scale - 1;
          if(currentScale<0){
            currentScale = 0
          }
          currentScale = initialScale + currentScale;
          cat.touchjs.scaleVal = currentScale;
          var transformStyle = 'scale(' + cat.touchjs.scaleVal + ') rotate(' + cat.touchjs.rotateVal + 'deg)';
          $targetObj.css("transform", transformStyle).css("-webkit-transform", transformStyle);
          callback(cat.touchjs.scaleVal);
        });

        touch.on($targetObj, 'pinchend', function (ev) {
          if (cat.touchjs.curStatus == 2) {
            return;
          }
          initialScale = currentScale;
          cat.touchjs.scaleVal = currentScale;
          callback(cat.touchjs.scaleVal);
        });
      }
    }
    cat.touchjs.scale(big,function(scale){
      if(scale < 1) {
        scale = 1
      }
    });
    cat.touchjs.drag(big, function (left, top) {
//      if($('.big').css('transform') == 'none') {
//          cat.touchjs.left = 0
//          cat.touchjs.top = 0
//        }
    });
  },
//  methods: {
//    touchstart (e) {
//      this.touchLen++
//      if (this.touchLen === 1) {
//        this.isScale = false
//        this.isTouchEnd = false
//        this.startX = e.touches[0].clientX
//      } else if (this.touchLen === 2) {
//        this.isScale = true
//        this.currentX = this.idx * this.oWidth
//        this.scaleOne.startX = e.touches[0].clientX
//        this.scaleTwo.startX = e.touches[1].clientX
//      }
//    },
//    touchmove (e) {
////      if (this.scaleX > 100) return
//      this.currentX = e.touches[0].clientX - this.startX + this.idx * this.oWidth
//      this.moveX = e.touches[0].clientX - this.startX
//    },
//    touchend (e) {
//
//      this.touchLen = e.changedTouches.length - 1
//      if (this.touchLen === 0 && this.isScale === true) {
//        this.isScale = false
//        return
//      }
//      if (this.isScale) return
//      if (this.scaleX > 100) return
//      if (Math.abs(this.moveX) > Math.abs(this.oWidth) / 4) {
//        if (this.moveX > 0){
//          if (this.idx !== 0) this.idx++
//        } else {
//          if (Math.abs(this.idx) < this.items.length - 1) this.idx--
//        }
////        $('.big').css({
////          top: 0,
////          left: 0
////        })
//      }
//
//      this.isTouchEnd = true
//      this.currentX = this.idx * this.oWidth
//      console.log($('.big'))
//
//    }
//  }
}
</script>

<style scoped lang="less">
.slider {
  overflow: hidden;
  height: 90%;
  position: relative;
  top: 60px;
  align-items: center;
  width: 100%;
  .container {
    /*height: 100%;*/
    display: flex;
    align-items: center;
    transform-origin:center;
    .list {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.mark {
  position: fixed;
  bottom: 5em;
  right: 3em;
  background: rgba(100, 100, 100, 0.6);
  color: white;
  height: 3em;
  width: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
  .big{
    position: relative;
    /*transform-origin:center;*/
  }
</style>
